<template>
  <div class="floor-selector-container">
    <div 
      v-for="floor in floors" 
      :key="floor.id"
      class="floor-item"
      :class="{ active: floor.id === currentFloor }"
      @click="selectFloor(floor.id)"
    >
      {{ floor.name }}
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const currentFloor = ref(6)

const floors = ref([
  { id: 3, name: '3F' },
  { id: 4, name: '4F' },
  { id: 5, name: '5F' },
  { id: 6, name: '6F' },
  { id: 7, name: '7F' }
])

const selectFloor = (floorId) => {
  currentFloor.value = floorId
  console.log(`切换到${floorId}楼`)
  
  // 这里可以触发BIM模型切换楼层
  // emit('floor-changed', floorId)
}
</script>

<style scoped>
.floor-selector-container {
  background: rgba(10, 25, 47, 0.8);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 18px 2px 74px 2px;
}

.floor-item {
  color: var(--text-secondary);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  width: 19px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 8px 10.5px;
  border-radius: 4px;
}

.floor-item:hover {
  background: var(--secondary-bg);
  color: var(--primary-blue);
}

.floor-item.active {
  background: var(--secondary-blue);
  color: var(--text-primary);
}
</style>